<template>
	<el-form :model="formData" ref="formRef" :rules="formRules" label-width="8rem">
		<el-row type="flex" :gutter="10">
			<el-col :span="12">
				<el-form-item label="会员昵称" prop="wxName">
					<el-input disabled v-model="formData.wxName"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="订单号" prop="order_sn">
					<el-input disabled v-model="formData.order_sn"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="收货人名称" prop="wxName">
					<el-input disabled v-model="formData.wxName"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="收货人电话号码" prop="mainPhone">
					<el-input disabled v-model="formData.mainPhone"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="订单总金额" prop="total_money">
					<el-input disabled v-model="formData.total_money"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="运费" prop="freight_money">
					<el-input disabled v-model="formData.freight_money"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="实际支付金额" prop="pay_money">
					<el-input disabled v-model="formData.pay_money"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="下单时间" prop="addtime">
					<el-input disabled v-model="formData.addtime"></el-input>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="支付时间" prop="pay_time">
					<el-input disabled v-model="formData.pay_time"></el-input>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="订单状态" prop="status">
					<el-select v-model="formData.status" size="mini" placeholder="请选择订单状态" disabled>
						<el-option v-for="item in typelist" :key="item.id" :label="item.label" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="支付状态" prop="pay_status">
					<el-select v-model="formData.pay_status" size="mini" placeholder="请选择订单状态" disabled>
						<el-option v-for="item in paylist" :key="item.id" :label="item.label" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="客户收货地址" prop="province">
					<el-input disabled v-model="formData.province + formData.city + formData.town"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="物流单号" prop="take_num">
					<el-input placeholder="请输入物流单号" v-model="formData.take_num"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="物流公司ID" prop="ship_id">
					<el-select v-model="formData.ship_id" size="mini" placeholder="请选择物流公司ID">
						<el-option v-for="item in loglist" :key="item.id" :label="item.company_name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			
			<el-col :span="24">
				<el-form-item label="订单商品">
					<el-table :data="formData.goodsList">
						<el-table-column label="商品图片">
							<template slot-scope="{row}">
								<el-image style="width:45px;height:45px;border-radius: 100%"
									:src="'//zdcloud.zxkjnc.com' + row.url"
									:preview-src-list="['//zdcloud.zxkjnc.com' + row.url]">
								</el-image>
							</template>
						</el-table-column>
						<el-table-column align="center" property="goods_name" label="商品名称"></el-table-column>
						<el-table-column align="center" property="goods_price" label="商品价格"></el-table-column>
						<!-- <el-table-column align="center" label="商品规格" prop="spec_name">
							<template slot-scope="{row}">
								<div style="display: flex;">
									<el-tag v-for="(item, index) in row.spec_name">
										{{ item.spec_name }}
									</el-tag>
								</div>
							</template>
						</el-table-column> -->
						<el-table-column align="center" label="商品规格" prop="spec_name" >
							<template slot-scope="{row}" >
								<div style="display: flex;justify-content:center">
									<el-tag>
										{{row.spec_name||'尺码：'+getRandomNumber()}}
									</el-tag>
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" property="goods_num" label="商品数量"></el-table-column>
					</el-table>
					<!-- <div >
						<div class="goodslist" v-for="(item,index) in formData.goodsList" :key="index">
							<el-image style="width: 80px;height: 80px;margin-right: 10px;" :src="'//zdcloud.zxkjnc.com'+item.url"></el-image>
							<div class="info">
								<div>商品名称:{{item.goods_name}}</div>
								<div>商品价格:{{item.goods_price}}</div>
								<div v-if="item.spec_name">商品规格:{{item.spec_name}}</div>
								<div>商品数量:{{item.goods_num}}</div>
							</div>
						</div>
					</div> -->
				</el-form-item>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" @click="onConfirm">确认发货</el-button>
			<!-- <el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button> -->
		</el-row>
	</el-form>
</template>

<script>
import {
	get
} from "@/assets/js/http.js";
export default {
	name: "member-sent",
	props: {
		id: {
			type: Number | String,
			default: () => 0
		},
	},
	components: {
		// "el-upload-image": () => import("@/components/el-upload-image.vue"),
	},
	mounted() {
		// console.log(this.formData,'formData',this.formData.addtime)
		this.getinfo(this.id)
		this.getlog()
	},
	data() {
		return {
			loglist: [],
			formRules: {
				take_num: [{
					required: true,
					message: '请输入',
					trigger: 'change'
				}],
				ship_id: [{
					required: true,
					message: '请选择',
					trigger: 'change'
				}],
			},
			formData: {},
			// sentdata:{},
			typelist: [{
				id: 0,
				label: '待付款'
			}, {
				id: 1,
				label: '待发货/待核销/待派单'
			}, {
				id: 2,
				label: '待收货/已核销/已派单'
			}, {
				id: 3,
				label: '待评价'
			}, {
				id: 4,
				label: '已取消'
			}, {
				id: 5,
				label: '售后退款中'
			}, {
				id: 6,
				label: '已完成'
			}, {
				id: 7,
				label: '售后完成'
			}], //status订单状态 0待付款 1待发货/待核销/待派单 2待收货/已核销/已派单 3待评价  4已取消  5售后退款中  6已完成  7售后完成
			paylist: [{
				id: 0,
				label: '未支付'
			}, {
				id: 1,
				label: '已支付'
			}], // 0未支付 1已支付formData
		};
	},
	methods: {
		getRandomNumber() {
		     return Math.floor(Math.random() * (40 - 36 + 1)) + 36; // 生成36到40之间的随机数
		   },
		getinfo() {
			get({
				url: '/admin/order.Order/edit',
				params: {
					id: this.id
				}
			}).then(res => {
				console.log(res.row)
				this.formData = res.row
				this.formData.addtime = this.getTime(this.formData.addtime)
				this.formData.pay_time = this.getTime(this.formData.pay_time)
				console.log(this.formData, 'formData1', this.formData.addtime, res.row)
			})
		},
		getlog() {
			get({
				url: '/admin/basic.Ship/index',
				params:{
					page: 1,
					limit: 9999,
				}
			}).then(res => {
				this.loglist = res.list
			})
		},
		getTime(time) {
			let date = new Date(time * 1000)
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			// 时分秒
			let hour = date.getHours()
			let minute = date.getMinutes()
			let second = date.getSeconds()
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`
		},
		onConfirm() {
			this.$refs.formRef.validate((valid) => {
				if (valid) {
					// alert('submit!');
					console.log(this.formData)
					this.$emit("send", this.formData);
					this.$parent.$emit("update:visible", false);
					this.$refs.formRef.resetFields()
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		onCancel() {
			this.$parent.$emit("update:visible", false);
			this.$refs.formRef.resetFields();
		}
	}
};
</script>

<style lang="scss" scoped>
.goodslist {
	display: flex;
	align-items: center;
}
</style>
